<template>
  <div class="config-font">
    <div class="common-title" v-if="useingInfo.voice_key">当前使用：</div>
    <div class="item using-item" v-if="useingInfo.voice_key">
      <div class="item-bottom">
        <div class="avatar-wrapper"  @click="playVoiceItem(useingInfo.voice_audio)">
          <img :src="useingInfo.voice_image" alt="" class="voice-img"/>
          <img src="@/assets/image/play-media-btn.png" alt="" class="play-btn" v-if="!useingInfo.isPlaying"/>
          <img src="@/assets/image/pause-icon.png" alt="" class="play-btn" v-else/>
        </div>
        <p class="voice-name">{{ useingInfo.voice_name }}</p>
        <span class="using">正在使用</span>
      </div>
    </div>
    <div class="common-title">全部声音：</div>
    <div class="item" v-for="(item, index) in list" :key="index">
      <div class="item-bottom">
        <div class="avatar-wrapper" @click="playVoice(index)">
          <img :src="item.voice_image" alt="" class="voice-img"/>
          <img src="@/assets/image/play-media-btn.png" alt="" class="play-btn" v-if="!item.isPlaying"/>
          <img src="@/assets/image/pause-icon.png" alt="" class="play-btn" v-else/>

        </div>
        <p class="voice-name">{{ item.voice_name }}</p>
        <span class="use-btn" @click="useVoice(item)">使用</span>
      </div>
    </div>
  </div>
</template>

<script>
import { listPreferenceVoice, findPersonParam, updatePersonParam } from '@/api/account'
import { getOssDomain } from '@/api/oss'

export default {
  data () {
    return {
      list: [],
      currentVoiceKey: '',
      useingInfo: {},
      oss_domain: '',
    }
  },
  async mounted () {
    if (!sessionStorage.getItem('oss_domain')) {
      const res = await getOssDomain()
      sessionStorage.setItem('oss_domain', res.domain)
      this.oss_domain = res.domain
    } else {
      this.oss_domain = sessionStorage.getItem('oss_domain')
    }
    findPersonParam().then(res => {
      this.currentVoiceKey = res.voice_key
      this.getVoiceList()
    }).catch(err => {
      this.getVoiceList()
    })
  },
  methods: {
    playVoiceItem (url) {
      if (this.audio && !this.audio.paused) {
        this.audio.pause()
      }
      const that = this
      that.$set(that.useingInfo, 'isPlaying', true)
      this.audio = document.createElement("audio");
      this.audio.setAttribute("src", url);
      this.audio.play();
      this.audio.addEventListener('ended',function () {
        that.$set(that.useingInfo, 'isPlaying', false)
      })
    },
    getVoiceList () {
      listPreferenceVoice().then(res => {
        this.list = res
        if (this.currentVoiceKey) {
          const obj = res.find(i => i.voice_key === this.currentVoiceKey)
          this.useingInfo = JSON.parse(JSON.stringify(obj))
        }
      })
    },
    useVoice (item) {
      console.log('item:', item)
      updatePersonParam({
        voice_key: item.voice_key
      }).then(res => {
        console.log('声音更新成功')
        this.currentVoiceKey = item.voice_key
        this.useingInfo = this.list.find(i => i.voice_key === item.voice_key)
      })
    },
    playVoice (index) {
      const that = this
      const url = this.list[index].voice_audio
      this.list[index]
      this.$set(this.list[index], 'isPlaying', true)
      if (this.audio && !this.audio.paused) {
        this.audio.pause()
      }
      this.audio = document.createElement("audio");
      this.audio.setAttribute("src", url);
      this.audio.play();
      this.audio.addEventListener('ended',function () {
        that.$set(that.list[index], 'isPlaying', false)
      })
    }
  }
}
</script>

<style scoped>
.avatar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.47vw;
  height: 15.47vw;
  border-radius: 1.07vw;
  margin-right: 3.2vw;
}
.play-btn {
  position: relative;
  width: 3.6vh;
  height: 3.6vh;
  z-index: 8;
}
.voice-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.voice-name {
  flex: 1;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 22px;
  color: #3D3D3D;
}
.use-btn {
  width: 14.4vw;
  height: 6.93vw;
  text-align: center;
  line-height: 6.93vw;
  border-radius: 1.07vw;
  background: #006EDD;
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #FFFFFF;
}
.using {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #006EDD;
}
.font-img {
  height: 10.67vw;
  width: auto;
  max-width: 66.67vw;
}
.common-title {
  margin-bottom: 2.13vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #3D3D3D;
}
.config-font {
  box-sizing: border-box;
  padding: 5.33vw 5.33vw 0;
}
.item {
  height: 22.4vw;
  box-sizing: border-box;
  padding-top: 1.07vw;
  background: #ffffff;
  margin-bottom: 3.2vw;
  border-radius: 2.13vw;
}
.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 2.67vw 0 3.2vw;
  height: 100%;
}
.using-item {
  margin-bottom: 5.33vw;
}
</style>
